<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-select
        v-model="channels.adminId"
        placeholder="房间类型"
        clearable
        class="filter-item"
        style="width: 200px; margin-right: 20px"
      >
        <el-option
          v-for="item in calendarTypeOptions"
          :key="item.type"
          :label="item.display_name"
          :value="item.type"
        />
      </el-select> -->
      <el-input
        v-model="channels.perfectNumber"
        placeholder="赠送人ID"
        style="width: 200px; margin-left: 20px"
        class="filter-item"
      />

      <el-input
        v-model="channels.toPerfectNumber"
        placeholder="被赠送人ID"
        style="width: 200px; margin-left: 20px;margin-right:20px"
        class="filter-item"
      />

      <!-- <el-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
        start-placeholder="消费开始时间" end-placeholder="消费结束时间" align="right" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
      </el-date-picker> -->
      <span style="margin-right:20px">
        <el-date-picker
          v-model="value1"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="消费开始日期"
        />
      </span>
      <span>
        <el-date-picker
          v-model="value2"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="消费截止日期"
        />
      </span>
      <!--
      <el-input v-model="channels.roomId" placeholder="房间ID" style="width: 200px; margin-left: 20px"
        class="filter-item" /> -->

      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        style="margin-left: 20px"
        @click="handleFilter"
      >
        搜索
      </el-button>
    </div>

    <div class="liush">
      <div class="span_liushui">
        礼物总流水:<span>{{ roomMoneyInfo.totalMoney }}元</span>
        背包礼物总流水:<span>{{ roomMoneyInfo.boxMoney }}元</span>
      </div>
      <el-table :data="list" stripe style="width: 1200px" border>
        <el-table-column prop="nickname" label="赠送人" width="250" align="center" />
        <el-table-column prop="seller_nike_name" label="被赠送人" width="250" align="center" />
        <el-table-column prop="name" label="礼物" align="center" width="200" />
        <el-table-column prop="num" label="数量" align="center" width="100" />
        <el-table-column prop="money" label="累计钻石" align="center" />
        <el-table-column prop="add_time" label="赠送时间" align="center" />
      </el-table>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="channels.pageNo"
      :limit.sync="channels.pageSize"
      @pagination="handleFilter"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import {
  encryption2
} from '@/api/index'
export default {
  name: 'ComplexTable',
  components: {
    Pagination
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }
        ]
      },
      value1: '',
      value2: '',
      roomMoneyInfo: {
        boxMoney: '',
        totalMoney: ''
      },
      channels: {
        perfectNumber: '',
        toPerfectNumber: '',
        roomId: '',
        pageNo: 1,
        pageSize: 20
      },
      calendarTypeOptions: [],
      total: 0,
      list: []
    }
  },
  created() {
    this.channels.roomId = this.$route.params.roomId
    this.handleFilter()
  },
  methods: {
    // 查询
    handleFilter() {
      const arys = {
        roomId: this.channels.roomId, // 房间id
        perfectNumber: this.channels.perfectNumber, // 赠送人
        toPerfectNumber: this.channels.toPerfectNumber, // 被赠送人
        startDate: this.value1 ? this.value1 : '', // 消费开始时间
        endDate: this.value2 ? this.value2 : '', // 消费结束时间
        pageNo: this.channels.pageNo,
        pageSize: this.channels.pageSize
      }
      const url = '/room/roomGiftList'
      encryption2(arys, url).then((res) => {
        if (res.data.status === 0) {
          this.list = res.data.result.list
          this.total = res.data.result.count
          this.roomMoneyInfo = res.data.result.roomMoneyInfo
          // console.log(res.data.result);
        } else {
          this.$message({
            message: res.data.text,
            type: 'error'
          })
        }
      })
    }
  }
}
</script>
<style scoped>
  .filter-container .filter-item {
    margin-bottom: 0;
  }

  .el-table--border {
    border-right: 1px solid #dfe6ec;
  }

  .filter-container {
    width: 1200px;
  }

  .liush {
    display: flex;
    flex-direction: column;
  }

  .span_liushui {
    margin: 20px 0;
    width: 1220px;
    font-size: 18px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
      "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }

  .span_liushui span {
    padding-right: 20px;
  }
</style>
